<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="课程名" label-width="90px" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="授课老师" prop="teacherId" label-width="90px">
                <el-select v-model="form.teacherId" placeholder="请选择教师">
                    <el-option v-for="item in teacherlist" :label="item.name" :value="item.id"
                        :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年级" label-width="90px" prop="grade">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上课时间" prop="weekI  d" label-width="90px">
                <el-select v-model="form.weekId" placeholder="请选择星期">
                    <el-option v-for="item in weekOptions" :label="item.label" :value="item.value"
                        :key="item.id"></el-option>
                </el-select>
                <el-select v-model="form.jieId" placeholder="请选择第几节课">
                    <el-option v-for="item in classOptions" :label="item.label" :value="item.value"
                        :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时长(节)" label-width="90px" prop="times">
                <el-input v-model="form.times" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上课地点" label-width="90px" prop="location">
                <el-input v-model="form.location" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学分" label-width="90px" prop="credit">
                <el-input v-model="form.credit" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="最大容量" label-width="90px" prop="maxSize">
                <el-input v-model="form.maxSize" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="考试地点" label-width="90px" prop="examLocation">
                <el-input v-model="form.examLocation" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="考试时间" label-width="90px" prop="examDate">
                <el-date-picker v-model="form.examDate" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item style=" display: flex; justify-content: flex-end;">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button @click="qx">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { teachernames } from '@/api/course';
import { coursedetail } from '@/api/course';
import { courseedit } from '@/api/course';
export default {
    props:['id'],
    data() {
        return {
            form: {
                id: -1,
                name: "",
                teacherId: "",
                time: "",
                maxSize: "",
                location: "",
                grade: "",
                examLocation: "",
                examDate: "",
                credit: "",
                 weekId: "",
                jieId: "",
                times: "",

            },
            rules: {
                name: [{
                    required: true, message: "请输入课程名", trigger: "blur"
                }],
                teacherId: [{
                    required: true, message: "请选择老师", trigger: "blur"
                }],

                maxSize: [{
                    required: true, message: "请输入容量", trigger: "blur"
                }],
                location: [{
                    required: true, message: "请输入上课地点", trigger: "blur"
                }],
                grade: [{
                    required: true, message: "请输入年级", trigger: "blur"
                }],
                examLocation: [{
                    required: true, message: "请输入考试地点", trigger: "blur"
                }],
                examDate: [{
                    required: true, message: "请输入考试时间", trigger: "blur"
                }],
                credit: [{
                    required: true, message: "请输入学分", trigger: "blur"
                }],
                 time: [{
                    required: true, message: "请输入上课时间", trigger: "blur"
                }],

               
            },
            teacherlist: [],
            weekOptions: [
                { label: '星期一', value: 1 },
                { label: '星期二', value: 2 },
                { label: '星期三', value: 3 },
                { label: '星期四', value: 4 },
                { label: '星期五', value: 5 },
                { label: '星期六', value: 6 },
                { label: '星期日', value: 7 }
            ],
            classOptions: Array.from({ length: 10 }, (_, i) => ({
                label: `第${i + 1}节`,
                value: i + 1
            })),
        }
    },
    methods: {
        submit() {
            this.form.time=this.form.weekId+'-'+this.form.jieId+'-'+this.form.times
            // 触发表单验证
            this.$refs['form'].validate(falg => {
                if (falg) {
                    courseedit(this.form).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: "修改成功"
                            })
                            // 通知父级关闭对话框
                            this.$emit("close")
                        }

                    })
                }
            })

        },
        getlist() {
            teachernames().then(res => {
                this.teacherlist = res.data
            })
            coursedetail(this.id).then(res=>{
                console.log(res);
                
                this.form.name=res.data.name
                this.form.maxSize=res.data.maxSize
                this.form.teacherId=res.data.teacherId
                this.form.location=res.data.location
                this.form.id=res.data.id
                this.form.grade=res.data.grade
                this.form.credit=res.data.credit
                this.form.examLocation=res.data.examLocation
                this.form.examDate=res.data.examDate
                let a=res.data.time.split('-')
                this.form.weekId=Number(a[0])
                this.form.jieId=Number(a[1])
                this.form.times=Number(a[2])
                
            })
        },
        qx() {
            this.$emit("close")
        }
    },
    mounted() {
        this.getlist()
    }
}
</script>

<style lang="sass" scoped>

</style>